<template>
  <view class="product-card" @click="goDetail">
    <view class="product-image">
      <image :src="product.image" mode="aspectFill"></image>
    </view>
    <view class="product-info">
      <text class="product-name ellipsis-2">{{ product.name }}</text>
      <view class="product-price-wrap">
        <text class="product-price text-primary">¥{{ product.price }}</text>
        <text class="product-origin-price" v-if="product.originPrice">¥{{ product.originPrice }}</text>
      </view>
      <view class="product-bottom">
        <text class="product-sales">销量 {{ product.sales || 0 }}</text>
        <view class="cart-btn" @click.stop="addToCart">
          <text class="iconfont icon-cart"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useCartStore } from '@/store/modules/cart';

export default {
  name: "ProductCard",
  props: {
    product: {
      type: Object,
      default: () => ({})
    }
  },
  setup() {
    // 获取购物车 store
    const cartStore = useCartStore();
    
    return {
      cartStore
    };
  },
  methods: {
    // 跳转到商品详情页
    goDetail() {
      uni.navigateTo({
        url: `/pages/product/detail?id=${this.product.id}`
      });
    },
    
    // 添加到购物车
    addToCart() {
      try {
        this.cartStore.addToCart({
          id: this.product.id,
          name: this.product.name,
          price: this.product.price,
          image: this.product.image,
          count: 1
        });
        
        uni.showToast({
          title: '已加入购物车',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss">
.product-card {
  width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  
  .product-image {
    width: 100%;
    height: 300rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .product-info {
    padding: 16rpx;
  }
  
  .product-name {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10rpx;
    height: 84rpx;
  }
  
  .product-price-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .product-price {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  .product-origin-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
  
  .product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .product-sales {
    font-size: 24rpx;
    color: #999;
  }
  
  .cart-btn {
    width: 50rpx;
    height: 50rpx;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      color: #fff;
      font-size: 30rpx;
    }
  }
}
</style> 